import { Divider, Form } from '@nutui/nutui-react-taro';
import type { FormItemProps as FormItemPropsNutUi } from '@nutui/nutui-react-taro/dist/types/packages/formitem/formitem';
import { View } from '@tarojs/components';
import type { FC, PropsWithChildren } from 'react';
import './index.scss';

interface FormItemProps extends Partial<FormItemPropsNutUi> {
  layout?: 'horizontal' | 'vertical';
  labelExtra?: React.ReactNode | string;
  divider?: boolean;
}

const PREFIX_CLS = 'my-form-item';

const FormItem: FC<PropsWithChildren<FormItemProps>> = ({
  children,
  layout = 'vertical',
  labelExtra,
  divider = true,
  className = '',
  ...rest
}) => {
  return (
    <>
      {layout === 'horizontal' && <Form.Item {...rest}>{children}</Form.Item>}
      {layout === 'vertical' && (
        <View className={`${PREFIX_CLS}-vertical`}>
          <View className={`${PREFIX_CLS}-vertical-label`}>
            {rest.label} <View>{labelExtra}</View>
          </View>
          <Form.Item {...rest} className={className} noStyle>
            {children}
          </Form.Item>
          {divider ? (
            <Divider className={`${PREFIX_CLS}-vertical-divider`} />
          ) : null}
        </View>
      )}
    </>
  );
};

export default FormItem;
